import DarkCard from "../../../../../../common/DarkCard";
import { CloseOutlined } from "@ant-design/icons";
import { Button, Descriptions } from "antd";
import biaoge from "../../../Zhpg/Yxfx/YxfxXq/biaoge";
import jzzyxl from "../../../../../manager/newPages/NewJzzy/jzzyxl";
import Api from "../../../../../../../utils/api";
import { useEffect, useState } from "react";
export default function JzXqList(props) {
    const { jzXqList, jzfx } = props;
    const data = { ...jzXqList, ...JSON.parse(jzXqList?.xq) }
    const btzd = biaoge();
    const [data1, setData1] = useState()
    //    console.log('jzfx',jzfx)
    const detailTemplate = jzzyxl[jzfx]?.templates
    useEffect(() => {

        Api.getConfig().then(resp => {
            if (jzfx) {
                const targetTemplate = jzzyxl[jzfx]?.templates || resp?.detailTemplate?.[`${jzfx}`];
                setData1(targetTemplate)
            }


        })
    }, [jzfx])
    return <>
        <DarkCard style={{
            position: 'absolute',
            right: '10px',
            width: '300px',
            top: '20px',
            bottom: '20px',
            pointerEvents: 'auto',
            borderRadius: 8,
        }} className="layout-v">
            <div style={{
                fontSize: 20,
                fontWeight: "bold",
                borderBottom: "1px solid #eee",
                paddingBottom: 12,
                marginBottom: 12
            }} className='layout-h center'>
                <div className='fill w0'>{jzXqList?.jzzymc}</div>
                <div>
                    <Button size="small" icon={<CloseOutlined />} style={{
                        // color: "#fff"
                        background: "#00000000"
                    }} onClick={e => {
                        props?.onClose?.()
                    }} />
                </div>

            </div>
            <Descriptions column={1} bordered size="large" className="fill h0" style={{
                overflow: 'auto'
            }}>
                {
                    data1?.map((item, value) => {
                        return (
                            <Descriptions.Item label={item.alias || item.title}>{data?.[`${item.name || item.dataIndex}`]}</Descriptions.Item>
                        )
                    })
                    // Object.entries(data).map(([key, value]) => {
                    //     return (
                    //         <Descriptions.Item label={btzd[`${jzfx}`][key]}>{value}</Descriptions.Item>
                    //     )
                    // })
                }

            </Descriptions>
        </DarkCard>
    </>
}